import { Spin } from 'antd';
import React from 'react';

export const loadGraph = (jslibs: string[], callBack: () => void, onError: (lib: string, ex: any) => void) => {
  if (!jslibs || jslibs.length === 0) {
    jslibs = [
      './rzgraph/rzgraph/jquery.min.js',
      './rzgraph/rzgraph/js/highstock.js',
      './rzgraph/rzgraph/js/highcharts-more.js',
      './rzgraph/rzgraph/js/highcharts-3d.js',
      './rzgraph/rzgraph/js/theme.js',
      './rzgraph/rzgraph.min.js',
    ];
  }
  // 动态加载图形组件
  const loadJs = (index: number) => {
    if (index >= jslibs.length) {
      setTimeout(() => {
        callBack();
      }, 100);
      return;
    }
    // clearconsole.log('sss', jslibs, index);
    const id = jslibs[index].replace(/\//g, '').replace('.', '');
    if (document.getElementById(id)) {
      loadJs((index += 1));
    } else {
      const script = document.createElement('script');
      script.id = id;
      script.type = 'text/javascript';
      // script.crossOrigin = '';
      script.src = jslibs[index];
      script.onload = () => {
        loadJs((index += 1));
      };
      script.onerror = (ex) => {
        onError && onError(jslibs[index], ex);
      };
      // 这里需要加到body下 head里面第一次可能取不出来值
      document.body.appendChild(script);
    }
  };
  /** 加载图谱的库 */
  const loadJsLib = () => {
    if ((window as any).rzgraph) {
      callBack();
      return;
    }
    loadJs(0);
  };
  return loadJsLib();
};

const Index = () => {
  const [loading, setLoading] = React.useState(true);

  const chartRef = React.useRef(null);
  const divRef = React.useRef<HTMLDivElement | null>(null);

  React.useEffect(() => {
    loadGraph(
      [],
      () => {
        setLoading(false);
      },
      () => {
        setLoading(false);
      }
    );
  }, []);

  React.useEffect(() => {
    console.log('element');
    console.log(divRef);
    if ((window as any).rzgraph && divRef.current !== null) {
      console.log('element');
      console.log(divRef);

      const chart = new (window as any).rzgraph.CommonChart(divRef.current, '1', {
        onMainCursorMoved: (selectedX: any, selectedY: any, data: any, args: any, sourceData: any) => {
          console.log('选中变化了selectedX', selectedX);
          console.log('选中变化了selectedY', selectedY);
          console.log('选中变化了data', data);
          console.log('选中变化了args', args);
          console.log('选中变化了sourceData', sourceData);
        },
      });

      chart.layout.generateToolbox = false;

      chart.chartConfig.xIsTime = true;
      // 这里是删除内置的菜单 如果不要的话
      chart.menuInstance.RemoveMenuItem('LockChart');

      chart.Init();
      chartRef.current = chart;

      const chartData = [
        [
          [1591068223299, 1],
          [1591069223299, 2],
          [1591070223299, 3],
          [1591071223299, 1],
          [1591072223299, 3],
          [1591073223299, 5],
          [1591074223299, 8],
        ],
      ];

      chart.render(chartData, '', '');
    }
  });

  if (loading) {
    return <Spin />;
  }

  return (
    <>
      <div ref={divRef} style={{ width: '1000px', height: '500px' }} />
    </>
  );
};

export default Index;
